import { StyleSheet, View } from "react-native";
import {
  NavigationState,
  Route,
  SceneRendererProps,
  TabBar,
  TabView,
} from "react-native-tab-view";

import { useState } from "react";
import SearchPipeRoute from "./SearchPipeRoute";
import SearchCartoonRoute from "./SearchCartoonRoute";
import SearchUserRoute from "./SearchUserRoute";

interface SearchContentProps {
  searchText: string;
}

const SearchContent: React.FC<SearchContentProps> = ({ searchText }) => {

  const [routes] = useState([
    { key: "pipe", title: "内容" },
    { key: "cartoon", title: "角色" },
    { key: "user", title: "用户" },
  ]);

  const [index, onIndexChange] = useState(0);

  const renderScene = ({
    route,
  }: SceneRendererProps & {
    route: Route;
  }) => {
    switch (route.key) {
      case "pipe":
        return <SearchPipeRoute searchText={searchText} />;
      case "cartoon":
        return <SearchCartoonRoute searchText={searchText} />;
      case "user":
        return <SearchUserRoute searchText={searchText} />;
      default:
        return null;
    }
  };

  const renderTabBar = (
    props: SceneRendererProps & { navigationState: NavigationState<Route> }
  ) => (
    <TabBar
      {...props}
      scrollEnabled
      indicatorStyle={styles.indicator}
      style={styles.tabbar}
      labelStyle={styles.label}
      tabStyle={styles.tabStyle}
      activeColor="#3BC859"
      pressColor="rgba(255, 255, 255, 0)"
      pressOpacity={1}
    />
  );

  return (
    <TabView
      navigationState={{
        index,
        routes,
      }}
      renderScene={renderScene}
      renderTabBar={renderTabBar}
      onIndexChange={onIndexChange}
    />
  );
};

const styles = StyleSheet.create({
  tabbar: {
    backgroundColor: "white",
    elevation: 0,
    borderBottomWidth: 0.5,
    borderBottomColor: "rgba(0,0,0,0.05)",
  },
  indicator: {
    backgroundColor: "#3BC859",
    height: 2,
  },
  label: {
    fontWeight: "400",
    color: "grey",
    fontSize: 15,
  },
  tabStyle: {
    width: "auto",
    marginVertical: -3,
  },
  emptyTabStyle: {
    width: "100%",
  },
});

export default SearchContent;
